
<template>
  <div class="input-bottom-dialogue">
    <!--            头像-->
    <div style="margin-right: 14px;">
      <img style="width: 60px;height: 60px;" src="@/assets/images/notLoggedIn/user_image.png"></img>
    </div>
    <!--            右侧对话框-->
    <div class="input-bottom-dialogue-container">
      <div class="input-bottom-dialogue-container-box">
        <div class="timer">
<!--          <div class="input-tip-title">-->
<!--            <div class="tip">-->
<!--              <img style="width: 14px;height: 14px;margin-left: 4px" src="@/assets/images/notLoggedIn/home_icon.png">-->
<!--            </div>-->
<!--            <div class="title">{{label}}</div>-->
<!--          </div>-->
          <div class="category-list">
            <div :class="currentItem===index?'active-category-list-item':'category-list-item'" @click="selectAiItem(item,index)" class="category-list-item" v-for="(item,index) in aiDataList" :key="index">

            {{item}}
            </div>

          </div>
          <div class="tip-item" style="white-space: pre-line;">{{ aiDataString }}</div>

        </div>
        <div class="query-button-groups" >
          <div class="btn-box" @click="goRegister" v-if="isTourist">
            <div class="login-btn">
              上一步
            </div>
          </div>
          <div class="btn-box right-btn" >
            <div class="login-btn" @click="nextPageRoute(typeRoute)">
              下一步
            </div>
          </div>
        </div>
      </div>


    </div>

  </div>
</template>
<script setup>
import {useTouristHomepageStore} from "@/store/touristHomepage";
import {MENU_TYPE, PREDICT_STATUS} from "@/utils/consts";
import {ref} from "vue";

const props = defineProps({
  label: {
    type: String,
    default: () => {
      return ''
    }
  },
  isTourist: {
    type: Boolean,
    default: () => {
      return false
    }
  },
  typeRoute: {
    type: Number,
    default: () => {
      return ''
    }
  },
  aiDataList: {
    type: Array,
    default: () => {
      return []
    }
  },
  aiDataString: {
    type: String,
    default: () => {
      return ''
    }
  }
})
const $emit = defineEmits(['nextPageRoute'])
function nextPageRoute(type){
  console.log('type',type)
//   传入父级页面
  $emit('nextPageRoute',{
    typeRoute:type,
    isShow:true
  })



}
const currentItem=ref(-1)
function selectAiItem(data,index){
  if(index>0){
    currentItem.value=index;
  //   存入store目前选择的ai
    let setTouristLittle=useTouristHomepageStore().setTouristLittle;
    if(Number(setTouristLittle)===PREDICT_STATUS.TouristRoutePlanning){
      useTouristHomepageStore().setTouristTourRoute(data)
    }else if(Number(setTouristLittle)===PREDICT_STATUS.FoodRoutePlanning){
      useTouristHomepageStore().setTouristFoodRoute(data)
    }else if(Number(setTouristLittle)===PREDICT_STATUS.TransportationAccommodationPlanning){
      useTouristHomepageStore().setTouristTransRoute(data)
    }
  }

}

</script>
<style scoped lang="scss">
.input-bottom-dialogue{
  display: flex;
  .input-bottom-dialogue-container{
    overflow: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 233px;
    background: #EDDDCD;
    border-radius: 10px 10px 10px 10px;
    width: calc(100% - 20px);
    .input-bottom-dialogue-container-box{
      width: calc(100% - 40px);
      height: calc(100% - 40px);
      .timer{
        border-bottom: 1px solid #EBD7C5;
        .entourage-list{
          justify-content: space-between;
          width:100%;
        }
        .input-tip-title{
          display: flex;
          align-items: center;
          margin-bottom: 20px;
          .title{
            height: 16px;
            font-family: DingliesongtypefaceRegular;
            font-weight: 400;
            font-size: 16px;
            color: #9B6548;
            text-align: left;
            font-style: normal;
            text-transform: none;
          }
        }
        .category-list{
          display: flex;
          margin-top: 16px;
          //  换行
          flex-wrap: wrap;
          font-family: DingliesongtypefaceRegular;
          font-weight: 400;
          font-size: 16px;
          color: #9B6548;
          text-align: left;
          .category-list-item{
          //  行高
            line-height: 20px;
            cursor: pointer;
          }
          .active-category-list-item{
            //  行高
            cursor: pointer;

            font-family: DingliesongtypefaceRegular;
            font-weight: 400;
            font-size: 14px;
            color: #FFFFFF;
            line-height: 24px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            background: linear-gradient( 180deg, #B36930 0%, #F1C08C 100%);
            border-radius: 6px 6px 6px 6px;
          }



        }
        .tip-item{
          font-family: DingliesongtypefaceRegular;
          font-weight: 400;
          font-size: 14px;
          color: #9B6548;
          line-height: 24px;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }
      }
      .query-button-groups{
        display: flex;
        justify-content: end;
        .right-btn{
          margin-left: 14px;
        }
        .btn-box{
          margin-top: 14px;
          height: 50px;
          border-radius: 0px 0px 0px 0px;
          display: flex;
          justify-content: center;
          .login-btn {
            cursor: pointer;
            background-image: url("@/assets/images/notLoggedIn/bnt2@2x.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            width: 138px;
            height:42px;
            border-radius: 4px 4px 4px 4px;
            font-family: DingliesongtypefaceRegular;
            font-size: 16px;
            letter-spacing: 5px;
            color: #FFFFFF;
            line-height: 42px;
            text-align: center;
            &:hover {
              background-image: url("@/assets/images/login/login_btn_highlight.png");
              background-repeat: no-repeat;
              background-size: 100% 100%;
              width: 138px;
              height:50px;
              border-radius: 4px 4px 4px 4px;
              font-family: DingliesongtypefaceRegular;
              font-size: 16px;
              letter-spacing: 5px;
              color: #FFFFFF;
              line-height:42px;
              text-align: center;
            }
          }
        }
      }
    }

  }
}
.specifics{
  margin-top: 20px;
}
</style>